<template>
	<view>
		<view style="background: #fff;">
			<tn-scroll-list :indicator="false">
				<view class="item-container">
					<view v-for="(item, index) in category.list" :key="index" @click="chooseCate(index)"
						class="scroll-item tn-flex-center tn-flex-column">
						<view class="empty tn-grey-light_bg" />
						<view class="title" :class="{on: cateIndex == index}">{{item.cate_name}}</view>
					</view>
				</view>
			</tn-scroll-list>

			<view class="tn-flex category">
				<view class="cate">
					<block v-if="category.list[cateIndex] && category.list[cateIndex].children">
						<view class="item" v-for="(item, index) in category.list[cateIndex].children" :key="index"
							:class="{on: childIndex == index}" @click="chooseChild(index)">{{item.cate_name}}
						</view>
					</block>
				</view>
				<view class="list">
					<block v-if="course.list.length > 0">
						<view v-for="(item, index) in course.list" :key="index" class="item"
							@click="jumpPath('/pages/detail/detail?id='+item.id)">
							<image :src="item.thumb" mode="aspectFill"></image>
							<view class="title">{{item.course_ware_name}}</view>
						</view>
					</block>
					<block v-else>
						<view style="text-align: center;">
							<tn-icon size="150rpx" color="#ccc" name="creative"></tn-icon>
							<view style="color:#aaa;">当前分类暂无课件哦~</view>
						</view>
					</block>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import request from '@/util/request';
	import { onLoad } from '@dcloudio/uni-app';
	import { reactive, ref } from 'vue';

	const cateIndex = ref(0)
	const childIndex = ref(0)
	const category = reactive<any>({
		list: []
	})
	const course = reactive<any>({
		list: []
	})

	onLoad(() => {
		request.get('index/index').then((res : { data : any[]; }) => {
			category.list = res.data
			course.list = []
			getList()
		}).catch((err : any) => {
			uni.showToast({
				title: err,
				icon: 'none'
			})
		})
	})

	const getList = () => {
		request.get('index/getList', {
			pid: category.list[cateIndex.value].id,
			cid: category.list[cateIndex.value].children[childIndex.value].id
		}).then((res : { data : any[]; }) => {
			course.list = res.data
		}).catch((err : any) => {
			uni.showToast({
				title: err,
				icon: 'none'
			})
		})
	}

	const chooseCate = (index : number) => {
		cateIndex.value = index
		childIndex.value = 0
		course.list = []
		getList()
	}

	const chooseChild = (index : number) => {
		childIndex.value = index
		course.list = []
		getList()
	}

	const jumpPath = (path : string) => {
		uni.navigateTo({
			url: path
		})
	}
</script>

<style lang="scss" scoped>
	.item-container {
		position: relative;
		width: fit-content;
		display: flex;
		flex-wrap: nowrap;

		.scroll-item {
			flex-grow: 1;
			flex-shrink: 0;
			margin: 0rpx 20rpx;
			padding: 20rpx;


			.title {
				padding: 10rpx 15rpx;
				border-radius: 10rpx;

				&.on {
					background: var(--tn-color-primary);
					color: #fff;
				}
			}
		}
	}

	.category {
		.cate {
			width: 200rpx;
			border-right: 1rpx solid #eee;

			.item {
				height: 80rpx;
				line-height: 80rpx;
				padding: 0 10rpx;

				&.on {
					background: var(--tn-color-primary);
					color: #fff;
				}
			}
		}

		.list {
			flex: 1;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-evenly;
			background: #fff;
			margin-bottom: 20rpx;

			.item {
				width: 46%;
				margin: 20rpx 0;
				border-radius: 10rpx;
				box-shadow: 0 0 20rpx rgba(0, 0, 0, .2);

				image {
					width: 100%;
					height: 260rpx;
				}

				.title {
					margin: 20rpx;
				}
			}
		}
	}
</style>